<template>
    <div class="professor_pxjl">
       <!-- <router-view/>-->
        <div class="layout">
            <div class="table">
                <div>
                    <div><h3>培训经历管理</h3></div>
                     <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
            <!-- 新增按钮 -->
          <el-col :span="8">
              <el-button
                type="success"
                @click="adds()"
    			icon="el-icon-circle-plus"
                >新增</el-button>
          </el-col>
        </el-row>

        <!-- 动态用户列表 -->
        <el-table :data="tableData" stripe style="width: 100%" border >
          <el-table-column v-for="column in columns" :key='column.field'
          	:label="column.title" :prop="column.field" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="editShow(scope.row)" type="warning" size="mini">修改</el-button>
              <el-button @click="del(scope.row)" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
		
        <!-- 添加弹出框 -->
        <el-dialog title="新增培训经历" :visible.sync="el_show">
          <el-form :model="train">
            <el-form-item label="编号">
              <el-input
                placeholder="请输入编号"
                v-model="train.id"
                autocomplete="off"
              ></el-input>
            </el-form-item>
			<el-form-item label="培训机构">
			  <el-input
			    placeholder="请输入培训机构"
			    v-model="train.trainName"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>
			<el-form-item label="培训内容">
			  <el-input
			    placeholder="请输入培训内容"
			    v-model="train.train"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>
            <el-form-item label="开始日期">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="train.startDate"></el-date-picker>
			</el-form-item>
			<el-form-item label="结束日期">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="train.endDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="培训类型">
              <el-select v-model="train.status" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                placeholder="请输入备注"
                v-model="train.remark"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="edit()">编 辑</el-button>
            <el-button @click="err()">取 消</el-button>
          </div>
        </el-dialog>
     
      <!-- 分页 -->
      <!-- <el-pagination layout="total, sizes, prev, next, pager, jumper"
      	@size-change="sizeChange"
      	@current-change="currentChange"
      	:page-sizes="[2, 5, 10, 50]" :page-size="2" :total="total" >
      </el-pagination> -->
	
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
	import axios from 'axios';
export default {
  data() {
    return {
		options: [{
		          value: 0,
		          label: '全职'
		        },{
		          value: 1,
		          label: '业余'
		        }],
				value:"",
		columns:[
		{title:"编号",field:"id"},
		{title:"培训机构",field:"trainName"},
		{title:"培训内容",field:"train"},
		{title:"开始日期",field:"startDate"},
		{title:"结束日期",field:"endDate"},
		{title:"培训类型",field:"status"},
		{title:"备注",field:"remark"},
		],
		tableData:[{id:"1",trainName:"蓝翔",train:"挖掘",startDate:"2020-12-23",endDate:"2022-12-23",status:"业余",remark:"123"},
		{id:"2",trainName:"天一",train:"编程",startDate:"2021-12-23",endDate:"2023-12-23",status:"全职",remark:"456"},
		{id:"3",trainName:"耶鲁",train:"后端",startDate:"2022-12-23",endDate:"2024-12-23",status:"全职",remark:"789"}],
		el_show: false,
		resumeid:"102",
		modify:"0",
		train:{
			id:"",
			trainName:"",
			train:"",
			startDate:"",
			endDate:"",
			status:-1,
			remark:"",
			resumeid:"",
			isdelete:false,	
		}
	}
  },
  mounted() {
  	this.list();
  },
  methods:{
	  list(){
	  		  axios.get("http://localhost:9001/resume-train-experience/list",
	  		  {params:{
	  			  resumeid:this.resumeid
	  		  }}).then((response)=>{
	  			  console.log(response.data);
				  for (var i = 0; i < response.data.length; i++) {
					  this.tableData=response.data;
					  if(response.data[i].status=="1"){
						  response.data[i].status="业余";
					  }else if(response.data[i].status=="0"){
						  response.data[i].status="全职";
					  }else{
						  response.data[i].status="";
					  }
					  this.tableData=response.data;
				  }
	  		  })
	  },
	  adds() {
		this.modify="0",
		this.train.id="",
		this.train.trainName="",
		this.train.train="",
		this.train.startDate=null,
		this.train.endDate=null,
		this.train.status=null,
		this.train.remark="",
		this.train.resumeid=this.resumeid,
		this.train.isdelete=false,	
	    this.el_show = true
	  },
	  err() {
	    this.el_show = false
	  },
	  edit(){
	  	//新增或修改提交 post
	  	axios.post("http://localhost:9001/resume-train-experience/edit",
	  	{
	  		id:this.train.id,
	  		trainName:this.train.trainName,
	  		train:this.train.train,
	  		startDate:this.train.startDate,
	  		endDate:this.train.endDate,
			status:this.train.status,
			remark:this.train.remark,
	  		modify:this.modify,
	  		resumeid:this.train.resumeid,
	  		isdelete:this.train.isdelete
	  	}).then((response)=>{
	  		console.log(response);
	  		//更新列表 
	  		this.list();
	  		this.el_show=false;
	  	});
	  },
	  editShow(v){
	  	console.log(v.id);
	  	axios.get("http://localhost:9001/resume-train-experience/getById",
		{
	  		params:{id:v.id},
	  	}).then((response)=>{
	  		this.train=response.data;
	  		this.modify=1;
	  		this.el_show=true;
	  	});
	  },
	  del(v){
	  	console.log(v.id);
	  	//是否删除
	  	if(confirm("是否删除?")){
	  		//删除请求 empno
	  		axios.get("http://localhost:9001/resume-train-experience/del",{
	  			params:{
	  				id:v.id,
	  				},}).then((response)=>{
	  			console.log(response);
	  			//更新列表 
	  			this.list();
	  		})
	  	}
	  }
  }
}
</script>
<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .professor_pxjl{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>